<template>
  <div class="home">


    <!-- 顶部 -->
    <div class="header1">
      <div class="hander">
        <div class="header-top">
          <router-link to="/">
            <img class="top-img"
              src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png">
          </router-link>
          <a href="https://m.ximalaya.com/applink?open_xm=iting%3A%2F%2Fopen%3Fcopycode%3D1%2520http%253A%252F1%2523Xm001erVDj%2523%2522&from=">

            <div class="open">打开APP
            </div>
          </a>
        </div>
        <router-link to="/search" class="search">
          <van-search placeholder="搜索" shape="round" />
        </router-link>
      </div>
    </div>

    <!-- 轮播图 -->
    <el-carousel :interval="2000" type="card" height="126px" indicator-position="none">
      <el-carousel-item v-for="item in imgList" :key="item.id">
       <a href="https://m.ximalaya.com/applink?open_xm=iting%3A%2F%2Fopen%3Fcopycode%3D1%2520http%253A%252F1%2523Xm001erVDj%2523%2522&from="><img :src="item.src"></a> 
      </el-carousel-item>     
    </el-carousel>

    <!-- 导航 -->
    <el-row class="nav">
      <el-col class="charts" :span="8">
        <router-link to="/rank">       
          <img src="https://fdfs.xmcdn.com/group56/M09/3B/BD/wKgLgFyQujLCAVYRAAAuwA7DZMg198.png" alt="">
          <p class="charts-title">排行榜</p>
        </router-link>
      </el-col>
      <el-col class="charts" :span="8">
        <router-link to="/category">       
          <img src="https://fdfs.xmcdn.com/group60/M02/18/F4/wKgLeVziZxHRlc-lAAAO9ZkPU-I489.png" alt="">
          <p class="charts-title">分类</p>
        </router-link>
      </el-col>
      <el-col class="charts" :span="8">
        <router-link to="ListeningList">
          <img src="https://fdfs.xmcdn.com/group57/M0A/3B/D0/wKgLgVyQuqWRZsJtAAAnr8tg4rs307.png" alt="">
          <p class="charts-title">听单</p>
        </router-link>
      </el-col>
    </el-row>


    <div class="nav-img">
      <a href="https://m.ximalaya.com/applink?open_xm=iting%3A%2F%2Fopen%3Fcopycode%3D1%2520http%253A%252F1%2523Xm001erVDj%2523%2522&from=">
        <img src="//imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png" alt="">
      </a>
      
    </div>


    <!-- 新人必听 -->
    <el-row class="listen">
      <p class="listen-title">新人必听</p>
      <el-col class="l-item" @click="toDetail(item.albumId)" :span="8" v-for="item in newListen" :key="item.albumId">
        <div class="l-img">
          <img :src="`https://imagev2.xmcdn.com/${item.albumCoverPath}`">
          <div class="icon">
            <van-icon class="v-icon" name="play-circle-o" color="#fff" size="14" />
            {{ item.albumPlayCount }}万
          </div>
        </div>
        <p class="l-title">{{ item.albumTitle }}</p>
      </el-col>
    </el-row>

    <!-- 限时免费 -->
    <div class="free">
      <div class="free-title">
        <van-count-down :time="remainingTime">
          <template #default="timeData">
            <span class="f-title">限时免费</span>
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="box">
        <div class="l-item" @click="toDetail(item.id)" v-for="item in limitedTimeFreeAlbums" :key="item.id">
          <div class="l-img">
            <img
              :src="item.coverPath">
            <div class="icon">
              <van-icon class="v-icon" name="play-circle-o" color="#fff" size="14" />
              {{ item.playCount }}万
            </div>
          </div>
          <p class="l-title">{{ item.title }}</p>
        </div>
      </div>
    </div>


    <!-- 今日热点 -->
    <div class="album">
      <div class="album-title">今日热点</div>
      <el-row @click="toDetail(item.albumId)" class="album-item" v-for="item in freeList" :key="item.albumId">
        <el-col class="a-left" :span="6">
          <div class="a-img">
            <img :src="item.albumCoverPath" alt="">
            <div class="float"></div>
            <svg t="1694774823280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="7660" width="16">
              <path d="M102.425742 102.393565v819.148516l614.361387-409.574258z" fill="#ffffff" p-id="7661"></path>
              <path d="M153.622524 102.393565v819.148516l614.361387-409.574258z" fill="#ffffff" p-id="7662"></path>
              <path d="M259.599863 15.871003V834.507551l619.481066-405.478515z" fill="#ffffff" p-id="7663"></path>
              <path d="M261.135767 189.428094l-1.535904 818.636549L875.497154 599.002353z" fill="#ffffff" p-id="7664">
              </path>
              <path
                d="M204.819306 102.393565m-102.393564 0a102.393565 102.393565 0 1 0 204.787129 0 102.393565 102.393565 0 1 0-204.787129 0Z"
                fill="#ffffff" p-id="7665"></path>
              <path
                d="M819.180694 409.574258c-56.316461 0-102.393565 46.077104-102.393565 102.393565s46.077104 100.345693 102.393565 102.393564c57.852364 2.047871 102.905532-45.053168 102.393564-102.393564-0.511968-56.316461-46.077104-102.393565-102.393564-102.393565zM204.819306 819.148517c-56.316461 0-102.393565 46.077104-102.393564 102.393564s46.077104 100.345693 102.393564 102.393565c53.756621 2.047871 100.857661-45.053168 102.393565-102.393565 1.535903-56.316461-46.077104-102.393565-102.393565-102.393564z"
                fill="#ffffff" p-id="7666"></path>
            </svg>
          </div>
        </el-col>
        <el-col class="a-right" :span="18">
          <div class="a-title">{{ item.title }}</div>
          <div class="info">
            <span class="person">
              <svg t="1694771046626" class="p-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5096" data-spm-anchor-id="a313x.search_index.0.i3.72cd3a8102ki8H"
                width="12">
                <path
                  d="M512 625.777778c-159.288889 0-284.444444-125.155556-284.444444-284.444445s125.155556-284.444444 284.444444-284.444444 284.444444 125.155556 284.444444 284.444444-125.155556 284.444444-284.444444 284.444445z m0-56.888889c125.155556 0 227.555556-102.4 227.555556-227.555556s-102.4-227.555556-227.555556-227.555555-227.555556 102.4-227.555556 227.555555 102.4 227.555556 227.555556 227.555556zM796.444444 1024h-56.888888v-398.222222h56.888888v398.222222z m-227.555555-170.666667v-56.888889h398.222222v56.888889h-398.222222z"
                  fill="#b8b8b8" p-id="5097" data-spm-anchor-id="a313x.search_index.0.i1.72cd3a8102ki8H" class="selected">
                </path>
                <path
                  d="M512 625.777778c-221.866667 0-398.222222 176.355556-398.222222 398.222222H56.888889c0-250.311111 204.8-455.111111 455.111111-455.111111"
                  fill="#b8b8b8" p-id="5098"></path>
              </svg>
              <span class="p-title">{{ item.anchorName }}</span>
            </span>
            <span class="listen">
              <van-icon class="p-icon" name="audio" />
              <span class="num">{{ item.playCount }}万</span>
            </span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 播客推荐 -->
    <div class="album">
      <div class="album-title">播客推荐</div>
      <el-row @click="toDetail(item.albumId)" class="album-item" v-for="item in freeList" :key="item.albumId">
        <el-col class="a-left" :span="6">
          <div class="a-img">
            <img :src="item.albumCoverPath" alt="">
            <div class="float"></div>
            <svg t="1694774823280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="7660" width="16">
              <path d="M102.425742 102.393565v819.148516l614.361387-409.574258z" fill="#ffffff" p-id="7661"></path>
              <path d="M153.622524 102.393565v819.148516l614.361387-409.574258z" fill="#ffffff" p-id="7662"></path>
              <path d="M259.599863 15.871003V834.507551l619.481066-405.478515z" fill="#ffffff" p-id="7663"></path>
              <path d="M261.135767 189.428094l-1.535904 818.636549L875.497154 599.002353z" fill="#ffffff" p-id="7664">
              </path>
              <path
                d="M204.819306 102.393565m-102.393564 0a102.393565 102.393565 0 1 0 204.787129 0 102.393565 102.393565 0 1 0-204.787129 0Z"
                fill="#ffffff" p-id="7665"></path>
              <path
                d="M819.180694 409.574258c-56.316461 0-102.393565 46.077104-102.393565 102.393565s46.077104 100.345693 102.393565 102.393564c57.852364 2.047871 102.905532-45.053168 102.393564-102.393564-0.511968-56.316461-46.077104-102.393565-102.393564-102.393565zM204.819306 819.148517c-56.316461 0-102.393565 46.077104-102.393564 102.393564s46.077104 100.345693 102.393564 102.393565c53.756621 2.047871 100.857661-45.053168 102.393565-102.393565 1.535903-56.316461-46.077104-102.393565-102.393565-102.393564z"
                fill="#ffffff" p-id="7666"></path>
            </svg>
          </div>
        </el-col>
        <el-col class="a-right" :span="18">
          <div class="a-title">{{ item.title }}</div>
          <div class="info">
            <span class="person">
              <svg t="1694771046626" class="p-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5096" data-spm-anchor-id="a313x.search_index.0.i3.72cd3a8102ki8H"
                width="12">
                <path
                  d="M512 625.777778c-159.288889 0-284.444444-125.155556-284.444444-284.444445s125.155556-284.444444 284.444444-284.444444 284.444444 125.155556 284.444444 284.444444-125.155556 284.444444-284.444444 284.444445z m0-56.888889c125.155556 0 227.555556-102.4 227.555556-227.555556s-102.4-227.555556-227.555556-227.555555-227.555556 102.4-227.555556 227.555555 102.4 227.555556 227.555556 227.555556zM796.444444 1024h-56.888888v-398.222222h56.888888v398.222222z m-227.555555-170.666667v-56.888889h398.222222v56.888889h-398.222222z"
                  fill="#b8b8b8" p-id="5097" data-spm-anchor-id="a313x.search_index.0.i1.72cd3a8102ki8H" class="selected">
                </path>
                <path
                  d="M512 625.777778c-221.866667 0-398.222222 176.355556-398.222222 398.222222H56.888889c0-250.311111 204.8-455.111111 455.111111-455.111111"
                  fill="#b8b8b8" p-id="5098"></path>
              </svg>
              <span class="p-title">{{ item.anchorName }}</span>
            </span>
            <span class="listen">
              <van-icon class="p-icon" name="audio" />
              <span class="num">{{ item.playCount }}</span>
            </span>
          </div>
        </el-col>
      </el-row>
    </div>


    <!-- 底部 -->
    <div class="footer">
      <img class="f-img"
        src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png">
      <div class="copyright">© 2014-2023 喜马拉雅 版权所有</div>
    </div>


  </div>
</template>

<script setup lang="ts">
import homeApi, { type newListModel, type albumsModel,  type freeListModel, type limitedTimeFreeAlbumsModel, type hotTracksModel } from '@/api/home/index.ts'
import router from '@/router';
import { ref } from 'vue';
import { onMounted } from 'vue';

const imgList = ref([
  {id:1, src:"http://fdfs.xmcdn.com/storages/c380-audiofreehighqps/09/66/GKwRIUEIcGNVAAH7LAIvlG7e.jpg"},
  {id:2, src:"http://fdfs.xmcdn.com/storages/5a07-audiofreehighqps/07/63/GKwRIJEIVM7KAAGIJQImImTm.jpg"},
  {id:3, src:"http://fdfs.xmcdn.com/storages/2786-audiofreehighqps/1F/52/GKwRIRwIcxFwAAH8EgIwpI2o.jpg"},
])

const pageNum = ref(1)
const pageSize = ref(6)
const newListen = ref<albumsModel[]>()
const newList = async () => {
  let result: newListModel = await homeApi.getNewListen(pageNum.value, pageSize.value)
  newListen.value = result.albums
  newListen.value = result.albums
  newListen.value.forEach((item:albumsModel) => {

    item.albumPlayCount = +(item.albumPlayCount / 10000).toFixed(2)
  })
}


const freeList = ref()
const limitedTimeFreeAlbums = ref()
const remainingTime = ref()
const getFree = async () => {
  let result: freeListModel = await homeApi.getFreeList()
  freeList.value = result.hotTrack.hotTracks
  freeList.value.forEach((item: hotTracksModel) => {
    item.playCount = +(item.playCount / 10000).toFixed(2)
  })

  limitedTimeFreeAlbums.value = result.limitedFreeAlbum.limitedTimeFreeAlbums
  limitedTimeFreeAlbums.value.forEach((item: limitedTimeFreeAlbumsModel) => {
   item.playCount = +(item.playCount / 10000).toFixed(2)
  })
  
  remainingTime.value = result.limitedFreeAlbum.remainingTime
}

const toDetail = ((id:number) => {
  router.push({name: 'Album', params: {id}})
})

onMounted(() => {
  newList()
  getFree()
})
</script>

<style lang="scss" scoped>

.home {
  width: 375px;

  .header1 {
    position: relative;
    height: 110px;

    .hander {
      background: #fff;
      position: fixed;
      z-index: 999;

      .header-top {
        margin: 15px 15px 0;
        display: flex;
        justify-content: space-between;

        .top-img {
          width: 120px;
          margin-right: 130px;
        }

        .open {
          top: 30px;
          background: #fa2800;
          color: #fff;
          width: 88px;
          font-size: 14px;
          text-align: center;
          padding-top: 6px;
          border-radius: 25px;
          height: 26px;
        }
      }

    }
  }

  .el-carousel {
    margin-bottom: 25px;
    .el-carousel__item{
      border-radius: 5px;
      margin-left: -55px;
      width: 300px;
      img {
        width: 300px;
      }
    }
  }

  .nav {
    text-align: center;
    margin-bottom: 20px;

    .charts {
      img {
        width: 34px;
        display: inline-block;
      }

      .charts-title {
        font-size: 12px;
        display: block;
        margin: 0;
        padding: 0;
        color: #666;
      }
    }
  }

  .nav-img {
    img {
      width: 100%;
      margin-bottom: 20px;
    }
  }

  .listen {
    .listen-title {
      width: 100%;
      padding: 0 15px;
      font-size: 18px;
      color: #40404c;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .l-item {
      text-align: center;

      .l-img {
        position: relative;

        img {
          width: 100px;
          height: 100px;
          border-radius: 5px;
        }

        .icon {
          position: absolute;
          bottom: 5px;
          left: 15px;
          font-size: 12px;
          color: #fff;
          align-items: center;

          .v-icon {
            background-color: rgba(0, 0, 0, .2);
            border-radius: 50%;
          }
        }
      }

      .l-title {
        font-size: 14px;
        margin: 0;
        padding: 0;
        padding: 0 5px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-bottom: 20px;
        text-align: left;
        width: 100px;
        margin-left: 5px;
      }
    }
  }

  .free {
    width: 375px;

    .free-title {
      width: 200px;
      margin-left: 15px;
      margin-top: 10px;    
      margin-bottom: 20px;
      .f-title {
        font-size: 18px;
        color: #40404c;
        font-weight: bold;
        margin-right: 10px;
      }

      .colon {
        display: inline-block;
        color: #333;
      }
      .block {
        display: inline-block;
        width: 22px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        background-color: #fa2800;
      }
    }

    .box {
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;

      .l-item {
        display: inline-block;
        width: 100px;
        margin-right: 5px;

        .l-img {
          position: relative;

          img {
            width: 100px;
            border-radius: 5px;
            display: inline-block;
          }

          .icon {
            position: absolute;
            bottom: 5px;
            left: 3px;
            font-size: 12px;
            color: #fff;
            align-items: center;

            .v-icon {
              background-color: rgba(0, 0, 0, .2);
              border-radius: 50%;
            }
          }
        }

        .l-title {
          font-size: 14px;
          margin: 0;
          padding: 0;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin-bottom: 20px;
        }
      }

    }
  }

  .album {
    padding: 0 15px;
    margin-bottom: 40px;

    .album-title {
      width: 100%;
      font-size: 18px;
      color: #40404c;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .album-item {
      margin: 30px 0;

      .a-left {
        .a-img {
          position: relative;

          img {
            width: 70px;
            border-radius: 5px;
          }

          .float {
            width: 70px;
            height: 70px;
            background: rgba(0, 0, 0, .3);
            position: absolute;
            top: 0;
            border-radius: 5px;
          }

          .icon {
            position: absolute;
            left: 28px;
            top: 28px;
            color: #fff;
          }
        }
      }

      .a-right {
        .a-title {
          font-size: 16px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin-bottom: 8px;
        }

        .info {
          font-size: 12px;
          color: #999;
          align-items: bottom;

          .person {
            margin-right: 10px;

            .p-icon {
              margin-right: 5px;
            }
          }

          .num {
            margin-left: 5px;
          }
        }
      }
    }
  }

  .footer {
    display: block;
    width: 100%;
    height: 180px;
    background-image: url('https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 70px;
    text-align: center;
    position: relative;

    .f-img {
      width: 104px;
      position: absolute;
      bottom: 120px;
      left: 135px;
    }

    .copyright {
      font-size: 12px;
      color: #888;
      position: absolute;
      bottom: 78px;
      left: 95px;
    }
  }

  
}
</style>